<template>
  <div>
<!--    <div class="c-container">-->
<!--      <flexbox v-if="!$slots.icon" class="title"><img   :onerror='`this.src="${require("@/assets/noimgsrc.png")}"`'   -->
<!--        :src="titleIcon"-->
<!--        class="title-icon">方案变更管理-->
<!--      </flexbox>-->
<!--    </div>-->
    <!-- 头部：搜索、操作 start -->
    <el-form v-show="true" ref="queryForm" :model="queryParams" :inline="true" label-width="80px"
             style="padding: 20px 20px 0px 20px;background-color: white;border-top: 0px solid #e6e6e6;">
      <!-- <el-form-item label="监测项类型">
        <el-select v-model="queryParams.monitorType" clearable placeholder="请选择监测项类型">
          <el-option
                  v-for="item in dictData.monitorTypeDict"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监测点名称">
        <el-input
          v-model="queryParams.pointName"
          placeholder="请输入监测点名称"
          clearable
          size="small"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item> -->
      <el-form-item style="float: right">
        <div class="right-container">
          <el-button
            v-if="canHandle('add')"
            class="xr-btn--orange"
            icon="el-icon-plus"
            type="primary"
            @click="createClick">新建
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <!-- 头部：搜索、操作 end -->
    <div class="table-head-container">
      <flexbox
        v-if="selectionList.length > 0"
        class="selection-bar">
        <div class="selected—title">已选中 <span class="selected—count">{{ selectionList.length }}</span> 项</div>
        <flexbox class="selection-items-box">
          <el-button
            v-for="(item, index) in selectionHandleItems"
            v-if="canHandle(item.type)"
            :icon="item.icon | wkIconPre"
            :key="index"
            type="primary"
            @click.native="handleTypeDrop(item.type)">{{ item.name }}
          </el-button>
        </flexbox>
      </flexbox>
    </div>
    <div
      v-empty="!canHandle('list')"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      >
      <el-table
        v-loading="loading"
        id="crm-table"
        :data="list"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        class="n-table--border"
        use-virtual
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          show-overflow-tooltip
          type="selection"
          align="center"
          width="55"/>
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :fixed="index==0"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="fieldFormatter"
          :sortable="false"
          :align="item.align"
          show-overflow-tooltip>

        </el-table-column>
		<el-table-column label="客户状态" align="center" prop="status" width="120px">
			<template slot-scope="scope">
				<el-tag type="success" v-if='scope.row.status==0'>潜在客户</el-tag>
				<el-tag type="warning" v-else-if='scope.row.status==1'>签约客户</el-tag>
				<el-tag type="info" v-else='scope.row.status==2'>流失客户</el-tag>
			</template>
		</el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="updateClick(scope.row)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteClick(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
    <!-- 新建 -->
    <create
      v-if="createShow"
      :businessType="businessType"
	  :dictData="dictData"
      :action="action"
      @close="createShow = false"
      @save-success="getList"
    />
  </div>
</template>

<script>

  import {mapGetters} from 'vuex'//权限
  import Lockr from 'lockr'//分页

  import Create from './Create'

/*  import {getList, delTrueByIds} from "../api/monitorPoint"
  import {selectEquOptions} from '../api/assets' */

  export default {
    /** DEMO列表 */
    name: 'monitorPoint',
    components: {
      Create
    },
    data() {
      return {
        businessType: 10000,
        loading: false, // 加载动画
        /** 选中时操作 */
        selectionHandleItems: [
          {
            name: '删除',
            type: 'delete',
            icon: 'delete'
          },
        ],
        /** 列表 */
        tableHeight: document.documentElement.clientHeight - 280, // 表的高度
        list: [],
        fieldList: [//表头
          {
            prop: "name",
            label: "客户名称",
            //width: "250"
          },
          {
            prop: "leadIndustryName",
            label: "所属行业",
            //width: "250"
          },
          {
            prop: "contactName",
            label: "联系人",
            //width: "250"
          },
          {
            prop: "contactPhone",
            label: "联系电话",
            //width: "180",
          },
          {
            prop: "visitedTime",
            label: "来访时间",
            //width: "180",
          },
          {
            prop: "requirements",
            label: "客户需求",
            //width: "180",
          },
          {
            prop: "leadHouseNumber",
            label: "意向房源",
            //width: "180",
          },
          {
            prop: "source",
            label: "来源",
            //width: "100",
          },
          {
            prop: "saleStage",
            label: "销售阶段",
            //width: "100",
          },
        ],
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 40, 80, 100],
        total: 0,
        queryParams:{},
        /** 新增*/
        createShow: false,
        /***/
        action: {type: 'save', data: null},
        /** 勾选行 */
        selectionList: [], // 勾选数据 用于全局导出
        /** 控制详情展示 */
        rowID: '', // 行信息,
		
		// 字典数据或关联下拉框数据
		dictData: {
			// 客户状态
			customerStatusDict: [
				{
					dictValue: '0',
					dictLabel: '潜在客户',
				},
				{
					dictValue: '1',
					dictLabel: '签约客户',
				},
				{
					dictValue: '2',
					dictLabel: '流失客户',
				},
			],
			// 来源
			customerSourceDict: [
				{
					dictValue: '0',
					dictLabel: '上门',
				},
				{
					dictValue: '1',
					dictLabel: '电话',
				},
				{
					dictValue: '2',
					dictLabel: '网络',
				},
				{
					dictValue: '3',
					dictLabel: '老客户介绍',
				},
				{
					dictValue: '4',
					dictLabel: '同行介绍',
				},
				{
					dictValue: '5',
					dictLabel: '其他',
				},
			],
			// 销售阶段
			saleStageDict: [
				{
					dictValue: '0',
					dictLabel: '初期沟通',
				},
				{
					dictValue: '1',
					dictLabel: '房源选择',
				},
				{
					dictValue: '2',
					dictLabel: '价格谈判',
				},
				{
					dictValue: '3',
					dictLabel: '合同签约',
				},
			],
			// 所属行业
			leadIndustryDict: [
				{
					dictValue: '0',
					dictLabel: 'IT',
				},
				{
					dictValue: '1',
					dictLabel: '金融123',
				},
				{
					dictValue: '2',
					dictLabel: '餐饮',
				},
			]
		}
      }
    },
    computed: {
      //权限 start
      ...mapGetters(['allAuth']),
      //权限 end
      titleIcon() {
        return require(`@/assets/img/crm/customer.png`)
      },
    },
    mounted() {
      /** 控制table的高度 */
      window.onresize = () => {
        this.updateTableHeight()
      }
	  // 获取字典数据
	  //this.initDicts()
      //获取列表数据
	  this.getList()
    },
    methods: {
      /** 获取列表数据 */
      getList() {
        this.loading = true
        //分页
        this.queryParams.page = this.currentPage;
        this.queryParams.limit = this.pageSize;
		
		this.list = [
			 {
			        "id": 12,
			        "name": "吴博",
			        "contactName": "吴博",
			        "contactPhone": "17776443471",
			        "visitedTime": null,
			        "requirements": "",
			        "leadHouseNumber": "2808",
			        "source": null,
			        "status": "1",
			        "lostReason": null,
			        "lostTime": null,
			        "saleStage": null,
			        "remarks": "",
			        "houseIds": [],
			        "leadHouses": [],
			        "leadIndustryId": "1",
			        "leadIndustryName": "IT"
			      },
			      {
			        "id": 11,
			        "name": "王双兰",
			        "contactName": "",
			        "contactPhone": "",
			        "visitedTime": null,
			        "requirements": "租商铺",
			        "leadHouseNumber": "101",
			        "source": "0",
			        "status": "0",
			        "lostReason": null,
			        "lostTime": null,
			        "saleStage": "0",
			        "remarks": "",
			        "houseIds": [],
			        "leadHouses": [],
			        "leadIndustryId": "2",
			        "leadIndustryName": "金融123"
			      },
			      {
			        "id": 10,
			        "name": "老刘",
			        "contactName": "",
			        "contactPhone": "33333",
			        "visitedTime": "2021-05-07T00:00:00",
			        "requirements": "6666",
			        "leadHouseNumber": "CS-0001",
			        "source": "5",
			        "status": "2",
			        "lostReason": null,
			        "lostTime": null,
			        "saleStage": "0",
			        "remarks": "",
			        "houseIds": [],
			        "leadHouses": [],
			        "leadIndustryId": "2",
			        "leadIndustryName": "金融123"
			      },
		]
		
		
		this.total = 3
		this.loading = false
		
        /* getList(this.queryParams)
          .then(res => {
            this.list = res.data.list;
            if (res.data.totalRow && Math.ceil(res.data.totalRow / this.pageSize) < this.currentPage && this.currentPage > 1) {
              this.currentPage = this.currentPage - 1
              this.getList()
            } else {
              this.total = res.data.totalRow
              this.loading = false
            }
            this.$nextTick(() => {
              document.querySelector('.el-table__body-wrapper').scrollTop = 1
            })
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          }) */
      },
      /**
       *更多操作点击
       */
      handleTypeDrop(command) {
        console.log(command)
        if (command == 'delete') {//删除
          this.$confirm("确定删除选中的数据吗？", '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              const ids = this.selectionList.map(item => item['id'])
              this.loading = true;
              delTrueByIds(ids).then(res => {
                if (res.code == 0) {
                  this.$message.success("删除成功");
                  this.getList();
                } else {
                  this.$message.error(res.msg);
                }
                this.loading = false;
              }).catch(err => {
                this.loading = false;
              });
            })
            .catch(() => {
            })
        } 
      },
      //列格式化  如一些字典等
      fieldFormatter(row, column, cellValue) {
		if (column.property === 'source') {
			return this.selectDictLabel(this.dictData.customerSourceDict, row.source)
		} else if (column.property === 'saleStage') {
			return this.selectDictLabel(this.dictData.saleStageDict, row.saleStage)
		}
        return row[column.property] === '' || row[column.property] === null ? '--' : row[column.property]
      },
      //按钮操作权限
      canHandle(type) {
        return true;
        //return this.allAuth.demo ? this.allAuth.demo.wf ? this.allAuth.demo.wf[type] : false : false;
      },
      /**
       * 通过回调控制class
       */
      cellClassName({row, column, rowIndex, columnIndex}) {
        if (column.property === 'planName') {
          return 'can-visit--underline can-visit--bold'
        }
      },
      /** 勾选操作 */
      // 当选择项发生变化时会触发该事件
      handleSelectionChange(val) {
        this.selectionList = val // 勾选的行
        this.updateTableHeight();
      },

      // 更改当前页数
      handleCurrentChange(val) {
        this.currentPage = val
        this.getList()
      },
	  
      // 更改每页展示数量
      handleSizeChange(val) {
        Lockr.set('crmPageSizes', val)
        this.pageSize = val
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {};
        this.getList()
      },
      /**
       * 新建点击
       */
      createClick() {
        this.action.type = 'save';
        this.createShow = true
      },
      /**
       * 修改点击
       */
      updateClick(row) {
        this.action.type = 'update';
        //this.action.id = id;
		this.action.data = row;
        this.createShow = true
      },
      deleteClick(id) {
        this.$confirm("确定删除选中的数据吗？", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
			  return;
            const ids = [id];
            this.loading = true;
            delTrueByIds(ids).then(res => {
              if (res.code == 0) {
                this.$message.success("删除成功");
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
              this.loading = false;
            }).catch(err => {
              this.loading = false;
            });
          })
          .catch(() => {
          })
      },
      /**
       * 更新表高
       */
      updateTableHeight() {
        var offsetHei = document.documentElement.clientHeight
        var removeHeight = this.selectionList.length > 0 ? 370 : 260
        this.tableHeight = offsetHei - removeHeight
      },
	  // 初始化字典数据
	  initDicts() {
		  this.getDicts('b_equipment_statistical_type').then(res => {
		    this.dictData.statisticalTypeDict = res.data
		  })
		  this.getDicts('b_equipment_monitor_type').then(res => {
		    this.dictData.monitorTypeDict = res.data
		  })
	  },
    }
  }
</script>

<style lang="scss" scoped>
  //表头
  .table-head-container {
    //border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    background-color: white;
  }

  .th-container {
    font-size: 13px;
    height: 50px;
    padding: 0 20px;

    .scene-select {
      width: 180px;
      /deep/ .el-input__inner {
        cursor: pointer;
      }
    }

    .filter-button {
      margin-left: 20px;
      /deep/ i {
        font-size: 14px;
        margin-right: 5px;
      }
    }
  }

  /** 场景和筛选 */
  .condition_title {
    cursor: pointer;
  }

  .condition_title:hover {
    color: $xr-color-primary;
  }

  .m-arrow {
    margin: 0 8px;
  }

  .c-filtrate {
    margin: 0 10px 0 30px;
    width: 12px;
  }

  /** 勾选操作 */
  .selection-bar {
    font-size: 12px;
    height: 50px;
    padding: 0 20px;
    color: #777;

    .selected—title {
      flex-shrink: 0;
      padding-right: 20px;
      color: #333;
      .selected—count {
        color: $xr-color-primary;
      }
    }
  }

  .selection-items-box {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 15px;

    .el-button {
      color: #666;
      background-color: #f9f9f9;
      border-color: #e5e5e5;
      font-size: 12px;
      height: 28px;
      border-radius: 4px;
      /deep/ i {
        font-size: 12px;
        margin-right: 5px;
      }
    }

    .el-button--primary:hover {
      background: $xr-color-primary;
      border-color: $xr-color-primary;
      color: #ffffff;
    }

    .el-button + .el-button {
      margin-left: 15px;
    }
  }

  //页面头部
  .c-container {
    height: 60px;
    position: relative;
    //z-index: 100;
    .title-icon {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }

    .title {
      float: left;
      width: auto;
      padding-left: 28px;
      font-size: 16px;
      font-weight: 600;
      margin-top: 15px;
    }
    .sc-container {
      width: 300px;
      margin: -16px 0 0 -150px;
      position: absolute;
      left: 50%;
      top: 50%;
    }

    .el-input {
      /deep/ .el-input-group__append {
        background-color: $xr-color-primary;
        border-color: $xr-color-primary;
        color: white;
      }
    }

    .right-container {
      margin-right: -10px;
      float: right;
      margin: 15px 20px 0 0;
      position: relative;

      .dup-check-btn,
      .xr-btn--orange {
        margin-left: 0;
        margin-right: 10px;
      }

      .right-item {
        float: left;
        margin-right: 10px;
        padding: 8px 10px;
        font-size: 13px;
        border-radius: 2px;
      }
    }
  }

  @import '@/views/styles/table.scss';
</style>
